<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="platform-tips">您买的哪个平台券？</view>
				<view class="nav-box flexWrapNo">
					<view class="nav-item flexWrapNo" :class="{active:type==0}" @tap="changeNav(0)">
						<image src="../../static/coupon/meituan-icon.png" style="width: 98upx;height: 50upx;"></image>
						<text>美团/点评</text>
					</view>
					<view class="nav-item flexWrapNo" :class="{active:type==1}" @tap="changeNav(1)">
						<image src="../../static/coupon/douyin-icon.png" style="width: 50upx;height: 50upx;"></image>
						<text>抖音团购券</text>
					</view>
				</view>
				<view class="verification-box flexWarpCenterColumn">
					<view class="verification-title">{{type==0?'美团/点评团购验券':'抖音团购验券'}}</view>
					<!-- <view class="input-box flexWrapNo"@tap="scanCode()">
						<image src="../../static/coupon/scan.png" class="upload-icon"></image>
						<input placeholder="识图验券（券码截图）" placeholder-class="placeholderClass" disabled/>
					</view> -->
					<!-- <view class="verification-title">或者</view> -->
					<view class="input-box flexWrapNo">
						<image src="../../static/coupon/edit.png" class="upload-icon"></image>
						<input :placeholder="type==0?'输入美团/点评团购券码':'输入抖音团购券码'" placeholder-class="placeholderClass" v-model="qr_code"/>
					</view>
					<view class="determine-btn" @tap="verificationCoupon()">
						立即验券
					</view>
				</view>
				<view class="verification-tips">
					<view>验券说明：</view>
					<view class="verification-text">
						<view>
							1、请注意所选门店是否为您所购券的门店，以免误选无
							法正常核销。
						</view>
						<view>
							2、输入券码或点击识图验券，选择券二维码图片进行
							验证，验证通过即可立即开台或预约开台。
						</view>
						<view>
							3、团购券皆为虚拟商品，核销后概不负责退还。
						</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-image" :class="{invalid:success==0}">
						<image src="/static/public/success-icon.png" v-if="success==1"></image>
						<image src="/static/coupon/invalid.png" v-else></image>
					</view>
					<view class="tips-name">{{success==1?'验券成功':msg}}</view>
					<view class="tips-text">{{success==1?dealInfo.title:'请重新选择'}}</view>
					<view class="tips-btn" :class="{'solid-btn':success==1}" @tap="closeTips()">知道了</view>
				</view>
				<view class="mask-wrap" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				tipsFlage:false,
				success:1,
				qr_code:"",
				deal_title:"",
				dealInfo:{},
				msg:"",
				type:0
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			changeNav(index){
				this.type=index
				this.qr_code=""
			},
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
				let qr_num=this.qr_code
				if(this.success==1){
					if(this.type==0){
						uni.navigateTo({
							url:'/pages/coupon/verificationOrder?meituan_id='+this.dealInfo.meituan_id+'&qr_code='+qr_num+'&id='+this.dealInfo.id
						})
					}else{
						uni.navigateTo({
							url:'/pages/coupon/douyinVerificationOrder?qr_code='+qr_num
						})
					}
				}
			},
			// 扫码
			scanCode(){
				let that=this
				uni.scanCode({
					success: function (res) {
						console.log(res)
						that.qr_code=res.result.replace(/\s*/g,"")
					}
				});
			},
			//核销
			verificationCoupon(){
				if(!this.qr_code){
					this.$tools.showToast('请输入或者上传后核销')
					return;
				}
				let requestUrl=""
				if(this.type==0){
					requestUrl=this.$api.verificationCoupon
				}else{
					requestUrl=this.$api.douyinHexiao
				}
				this.$tools.loadIng();
				this.$request.post(requestUrl, {
					store_id:uni.getStorageSync('store_id'),
					qr_code:this.qr_code,
					type:"save",
					store_equipment_id:uni.getStorageSync('equipment_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					this.dealInfo=data
					this.success=res.code
					this.msg=res.msg
					setTimeout(()=>{
						uni.hideLoading()
						this.showTips()
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 0 38upx;
	}
	.platform-tips{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333;
		text-align: center;
		padding-top: 20upx;
	}
	.nav-box{
		margin-top: 32upx;
		justify-content: center;
		border-bottom: 2upx solid #E3E3E3;
		padding-bottom: 40upx;
		.nav-item{
			width: 316upx;
			height:102upx;
			line-height: 102upx;
			text-align: center;
			background:#ACB1C1;
			border-radius: 16upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin-right: 20upx;
			justify-content: center;
			text{
				margin-left: 12rpx;
			}
		}
		.active{
			background-color: #FBD78E;
		}
	}
	.verification-box{
		.verification-title{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			margin: 30upx 0;
		}
	}
	.input-box{
		height: 100upx;
		background:#FFF;
		border-radius: 16upx;
		padding: 0 32upx;
		width: 500upx;
		input{
			line-height: 100upx;
			height: 100upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			color:#333;
			flex: 1;
		}
		.placeholderClass{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			color:#969696;
		}
		.upload-icon{
			width: 48upx;
			height: 48upx;
			margin-right: 24rpx;
		}
	}
	.determine-btn{
		width: 286upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background:#FFB726;
		border-radius: 16upx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333;
		margin: 60upx auto;
	}
	.verification-tips{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60upx;
		color:#6E6E6E;
	}
	.verification-text{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color:#6E6E6E;
		line-height: 60upx;
	}
	.tips-box{
		width: 660upx;
		height: 502upx;
		background:#fff;
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 20upx;
		z-index: 999;
		.tips-image{
			width: 70upx;
			height: 70upx;
			margin-top: 62upx;
			margin-bottom: 36upx;
			flex: none;
		}
		.invalid{
			width: 144upx;
			height: 144upx;
			margin-top: 24upx;
			margin-bottom: 14upx;
		}
		.tips-name{
			font-size:24upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 10upx;
		}
		.tips-btn{
			width: 246upx;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin-top: 42upx;
		}
		.solid-btn{
			background-color: #FFB726;
		}
	}
</style>
